<template>
  <div class="">
    <el-dialog
      ref="k_dia"
      title="日志详情"
      :visible.sync="open"
      width="70%"
      class="dia-style"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      @close="close"
    >
      <div class="log-tabs">
        <div class="tabs-btn">
          <span :class="{ active: activeIndex == 0 }" @click="activeIndex = 0">键/值</span>
          <span v-if="roleName=='超级管理员'" :class="{ active: activeIndex == 1 }" @click="handleJSONBtn">JSON</span>
        </div>
        <div v-if="activeIndex == 0" class="tabs-checkbox">
          <el-checkbox v-model="isChecked" @change="handleChangeCheck">显示空字段</el-checkbox>
        </div>
      </div>
      <template v-if="activeIndex == 0">
        <HkDetails style="margin-top: 10px" :details-list="logTypeLists" :form-data="logTypeData" label-width="220" />
        <div class="table-title">基础信息</div>
        <HkDetails :details-list="baseLists" :form-data="baseData" label-width="220" />
        <!-- <div class="table-title">扩展信息</div> -->
        <!-- <HkDetails :details-list="rawLists" :form-data="rawData" label-width="220" /> -->
      </template>
      <template v-else>
        <vue-json-editor
          v-model="jsonContent"
          class="json-editor"
          :show-btns="false"
          mode="code"
          lang="zh"
          :expanded-on-start="false"
        />
      </template>
      <template #footer>
        <el-button @click="close">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import HkDetails from '@/components/Hk-Details/index'
import vueJsonEditor from 'vue-json-editor'
import { detail } from '@/api/dispose/logTracing'
import { deepClone } from '@/utils'
import { detailList } from '@/api/dispose/logTracing'
import { mapState } from 'vuex'

export default {
  name: 'DialogDetails',
  components: { HkDetails, vueJsonEditor },
  props: {
    gid: {
      type: String,
      default() {
        return null
      }
    }
  },
  data() {
    return {
      open: false,
      detailData: {},
      baseData: {},
      rawData: {},
      logTypeData: {},
      baseLists: [],
      rawLists: [],
      logTypeLists: [{ label: '日志来源及类型', field: 'source_app' }],
      isChecked: false,
      activeIndex: 0,
      jsonContent: {},
      defaultData: {}
    }
  },
  computed: {
    ...mapState({
      roleName: state => state.user.roleName
    })
  },
  methods: {
    show(id) {
      detailList(id).then((res) => {
        this.changeDetailData(res)
        this.handleChangeCheck(false)
        this.open = true
      })
    },
    /* 改变数据结构 */
    changeDetailData(newVal) {
      const logTypes = {}
      this.logTypeData = {}
      this.baseLists = []
      this.rawLists = []
      const keys = Object.keys(newVal)
      keys.forEach((i, index) => {
        if (i === 'raw') {
          const rawObj = newVal[i]
          const rawKeys = Object.keys(rawObj)
          rawKeys.forEach((i) => {
            this.rawLists.push({ label: i, field: i, span: 12 })
            this.rawData[i] = rawObj[i]
          })
        } else {
          if (i === 'src_app_type' || i === 'behavior_type') {
            logTypes[i] = newVal[i]
          } else {
            this.baseLists.push({ label: i, field: i, span: i === '日志描述' ? 24 : 12 })
            this.baseData[i] = newVal[i]
          }
        }
      })
      this.logTypeData['source_app'] = `${logTypes['src_app_type']}-${logTypes['behavior_type']}`
      this.defaultData = {
        baseLists: this.baseLists,
        rawLists: this.rawLists
      }
    },
    /** 显示空字段*/
    handleChangeCheck(value) {
      if (value) {
        this.baseLists = deepClone(this.defaultData.baseLists)
        this.rawLists = deepClone(this.defaultData.rawLists)
      } else {
        const newBaseLists = this.baseLists.filter((i, index) => {
          return this.baseData[i.field] && this.baseData[i] != ''
        })
        this.baseLists = deepClone(newBaseLists)
        const newRawLists = this.rawLists.filter((i, index) => {
          return this.rawData[i.field] && this.rawData[i] != ''
        })
        this.rawLists = deepClone(newRawLists)
      }
    },
    /** 取消 */
    close() {
      this.open = false
      this.activeIndex = 0
      this.isChecked = false
    },
    /**  点击Json按钮 */
    handleJSONBtn() {
      detail(this.gid).then((res) => {
        this.activeIndex = 1
        this.jsonContent = res
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__footer{
position: absolute;
bottom:0;
}
::v-deep .el-dialog__body {
  height: 84%;
  padding: 0 20px !important;
}

::v-deep .el-dialog {
  height: calc(100% - 120px);
}

.table-title {
  margin: 10px 0;
  font-size: 16px;
  color: #000;
  line-height: 30px;
}

.log-tabs {
  display: flex;
  align-items: center;
justify-content: space-between;
  .tabs-btn {
    span {
      display: inline-block;
      cursor: pointer;
      padding: 8px 20px;
      border-bottom: 2px solid transparent;

      &.active {
        color: #4b6eef;
        border-bottom: 2px solid #4b6eef;
      }
    }
  }
}
.json-editor {
  height: 90%;
}
::v-deep .jsoneditor-vue {
  height: 100%;
}
::v-deep .el-form-item__label {
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
}
::v-deep .jsoneditor-poweredBy {
  display: none !important;
}
</style>
